<template>
    <div>
        <a-table :dataSource="procurementBillList"
                 :columns="columns"
                 :pagination="pagination"
                 @change="handlerChange"
                 style="margin-top: 10px"
                 bordered>
            <template #goods="{text,record}">
                {{beLongGoods(text)}}
            </template>
            <template #company="{text,record}">
                {{beLongCompany(text)}}
            </template>
            <template #state="{text,record}">
                <a-tag v-if="text == 0" color="processing">
                    <template #icon>
                        <sync-outlined :spin="true"/>
                    </template>
                    审批中
                </a-tag>
                <a-tag v-if="text == 1" color="success">
                    <template #icon>
                        <check-circle-outlined/>
                    </template>
                    审批通过
                </a-tag>
                <a-tag v-if="text == 2" color="error">
                    <template #icon>
                        <close-circle-outlined/>
                    </template>
                    申请失败
                </a-tag>
            </template>
            <template v-slot:action="{text,record}">
                <a-space>
                    <a-popconfirm
                            title="删除数据无法恢复，请确认是否删除？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button v-if="record.state != 0" type="danger">删除</a-button>
                    </a-popconfirm>
                    <a-button type="primary"
                              v-if="record.state != 2"
                              @click="checkAuditTrail(record)">
                        查看审核记录
                    </a-button>
                </a-space>
            </template>
        </a-table>
        <a-drawer
                title="采购申请单"
                :width="1000"
                :visible="procurementVisible"
                :body-style="{ paddingBottom: '40px' }"
                :footer-style="{ textAlign: 'right' }"
                @close="onClose"
        >
            <a-form :model="drawerData.outBoundBill" layout="vertical">
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="标题" name="title">
                            <a-input v-model:value="drawerData.procurementBill.title" :disabled="true"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="10">
                        <a-form-item label="合作公司" name="companyId">
                            <a-input :value="beLongCompany(drawerData.procurementBill.companyId)" :disabled="true"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="采购旗下商品" name="goodsId">
                            <a-input :value="beLongGoods(drawerData.procurementBill.goodsId)" :disabled="true"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="采购数量" name="quantity">
                            <a-input v-model:value="drawerData.procurementBill.quantity" :disabled="true"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="采购描述" name="remark">
                            <a-textarea v-model:value="drawerData.procurementBill.remark"
                                        :disabled="true" :rows="3"/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <a-table :dataSource="drawerData.comments"
                     :columns="commentColumns"
                     :pagination="false"
                     bordered>
                <template #time="{text,record}">
                    {{this.$moment(text).format('YYYY-MM-DD HH:mm:ss')}}
                </template>
                <template #user="{text,record}">
                    {{beLongUser(text)}}
                </template>
            </a-table>
        </a-drawer>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue'
    import {SessionStorage} from '../../../public/session-storage'
    import {CloseCircleOutlined, SyncOutlined, CheckCircleOutlined} from '@ant-design/icons-vue'

    export default {
        name: "orders-procurement",
        components: {
            CloseCircleOutlined,
            SyncOutlined,
            CheckCircleOutlined
        },
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center'
                },
                {
                    title: '标题',
                    dataIndex: 'title',
                    key: 'title',
                    align: 'center'
                },
                {
                    title: '合作公司',
                    dataIndex: 'companyId',
                    key: 'companyId',
                    slots: {customRender: 'company'},
                    align: 'center'
                },
                {
                    title: '采购合作商品',
                    dataIndex: 'goodsId',
                    key: 'goodsId',
                    slots: {customRender: 'goods'},
                    align: 'center'
                },
                {
                    title: '采购数量',
                    dataIndex: 'quantity',
                    key: 'quantity',
                    align: 'center',
                },
                {
                    title: '采购详情',
                    dataIndex: 'remark',
                    key: 'remark',
                    align: 'center',
                    width: '30%'
                },
                {
                    title: '状态',
                    dataIndex: 'state',
                    key: 'state',
                    slots: {customRender: 'state'},
                    align: 'center'
                },
                {
                    title: '当前进度',
                    dataIndex: 'progress',
                    key: 'progress',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center',
                    width: '20%'
                }
            ]
            const commentColumns = [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                    slots: {customRender: 'time'}
                },
                {
                    title: '批注人',
                    dataIndex: 'userId',
                    key: 'userId',
                    slots: {customRender: 'user'}
                },
                {
                    title: '批注信息',
                    dataIndex: 'fullMessage',
                    key: 'fullMessage',
                },
            ]
            const loginUser = ref({})
            const procurementBill = ref({})
            const procurementBillList = ref([])
            const userList = ref()
            const goodsList = ref([])
            const companyList = ref([])
            const pagination = ref({
                current: 1,
                pageSize: 6,
            })
            const procurementVisible = ref(false)
            const drawerData = ref({})

            const checkAuditTrail = (record) => {

                if (record.state == 1) {
                    axios.get('task/overAuditTrail/procurement/' + record.id).then(rs => {
                        drawerData.value = rs.data.data
                        procurementVisible.value = true
                    })
                } else if (record.state == 0) {
                    axios.get('task/currentAuditTrail/procurement/' + record.id).then(rs => {
                        drawerData.value = rs.data.data
                        procurementVisible.value = true
                    })
                }
            }

            const onClose = () => {
                procurementVisible.value = false
            }

            const beLongUser = (userId) => {
                let rs = ''
                userList.value.forEach(val => {
                    if (val.id == userId) {
                        rs = val.username
                        return rs
                    }
                })
                return rs == '' ? userId : rs
            }

            const load = () => {
                axios.get('/procurementBill/queryByUserId/' + loginUser.value.id, {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    procurementBillList.value = rs.data.data.list
                    procurementBillList.value.forEach((val)=>{
                        if (val.state == 0) {
                            axios.get('task/getCurrentProgress/procurement/' + val.id).then(res => {
                                val.progress = res.data.data
                            })
                        }else {
                            val.progress = '该申请已结束'
                        }
                    })
                    pagination.value.total = rs.data.data.total
                })
            }

            const handlerChange = (pageInfo) => {
                pagination.value = pageInfo
                load()
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/procurementBill/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const beLongGoods = (goodsId) => {
                let rs = ''
                goodsList.value.forEach(val => {
                    if (val.id == goodsId) {
                        rs = val.name
                        return rs
                    }
                })
                return rs == '' ? goodsId : rs
            }
            const beLongCompany = (companyId) => {
                let rs = ''
                companyList.value.forEach(val => {
                    if (val.id == companyId) {
                        rs = val.name
                        return rs
                    }
                })
                return rs == '' ? companyId : rs
            }

            onMounted(() => {
                loginUser.value = SessionStorage.get('loginUser')
                axios.get('goods/queryAll').then(rs => {
                    goodsList.value = rs.data.data
                })
                axios.get('user/queryAll').then(rs => {
                    userList.value = rs.data.data
                })
                axios.get('company/queryAll').then(rs => {
                    companyList.value = rs.data.data
                })
                load()
            })
            return {
                columns,
                pagination,
                handlerChange,
                load,
                okDelete,
                procurementBill,
                procurementBillList,
                beLongGoods,
                beLongCompany,
                beLongUser,
                commentColumns,
                checkAuditTrail,
                procurementVisible,
                drawerData,
                onClose,
            }
        }
    }
</script>

<style scoped>

</style>